<template>
	<view class="content">
		<view class="banner">
			<!-- <image src="../../../static/banner1.png" mode=""></image> -->
			<swiper circular autoplay interval=3000>
				<swiper-item v-for="(item,index) in imgList" :key="index" @click="imgTap(item,item.url)">
					<image :src="item.image"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="tips" v-if='titles'>
			<uni-notice-bar :num="num" :speed="speed" showGetMore="true" showIcon="true" style="width: 750rpx;padding: 30rpx  20rpx 10rpx 20rpx;"
				:single="true" :scrollable="true" :text="titles" @getmore="tomore"></uni-notice-bar>
		</view>
		<view class="func-box">
			<view class="func-item" v-for="(item,index) in fucList" :key="index" @tap="$navTo(item.url)">
				<image :src="item.img" mode=""></image>
				<view class="func-item-right">
					<view class="func-item-title">{{item.title}}
						<text v-if="index==1&&timeoutNum>0" class="msg">
							<template v-if="timeoutNum>99">
								99+
							</template>
							<template v-else>
								{{timeoutNum}}
							</template>
						</text>
					</view>
					<view class="func-item-detile">{{item.detile}}</view>
				</view>
			</view>
		</view>
		<view class="openChech" v-if="open">
			<view class="openTitle">选择你要检查的设备</view>
			<view class="openRideo">
				<view class="rideoBox" v-for="(item,index) in rideoList" :key="index">
					<label class="rideo">
						<radio @click="rideoChange(index)" :checked="current == index + ''" style="transform:scale(0.7)"
							value="item" />
					</label>
					<view class="rideoText">{{item}}</view>
				</view>
				<view class="rideoBtn">
					<view class="btn1" @click="open = false">取消</view>
					<view class="btn2" @click="openOk">确认</view>
				</view>
			</view>
		</view>
		<view class="openZhe" v-if="open">

		</view>
		<u-tabbar v-model="currents" :list="list" active-color='#003690' :before-switch="beforeSwitch"></u-tabbar>
	</view>
</template>

<script>
	import request from '../../common/request.js'
	export default {
		data() {
			return {
				username: '',
				password: '',
				// array: ['安装工','检测工','维修工'],
				index: 0,
				userinfo: {},
				value: '', //搜索关键词
				installList: [], //安装列表
				dosearch: false,
				showAcount: false,
				page: 1,
				fucList: [{
						img: '/static/homeicon/yhsb.png',
						title: '隐患上报',
						detile: '发现隐患及时上报',
						url: '/pagesB/securityCheck/dangerReport'
					},
					{
						img: '/static/homeicon/yh.png',
						title: '隐患处理',
						detile: '实时查看及处理隐患',
						url: '/pagesA/danger/danger'
					},
					{
						img: '/static/homeicon/jc.png',
						title: '用户安检',
						detile: '定期进行入户安检',
						url: '/pagesB/rithcheck/ritycheck'
					},
					{
						img: '/static/homeicon/sbjc.png',
						title: '日常巡检',
						detile: '管网及设备设施巡检',
						url: '/pagesA/inspection/inspection-list'
					},
					{
						img: '/static/homeicon/xgzl.png',
						title: '相关资料',
						detile: '日常所需小工具',
						url: '/pagesD/index/index'
					}, {
						img: '/static/homeicon/gl.png',
						title: '用户查询',
						detile: '用户信息查询渠道',
						url: '/pagesB/query/query'
					}
				],
				rideoList: ['调压箱检查', '阀门检查'],
				open: false,
				current: '',
				titles: '',
				num:0,
				speed:'',
				imgList: [],
				token: '',
				login: '',
				types: 0,
				url: 'https://wqzsgas.com/',
				currents: 0,
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						isDot: false,
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						isDot: false,
						customIcon: false,
					},
				],
				timeoutNum:0
			};
		},
		onShow() {
			this.getInstallDetail()
			this.getExceeddangerNum()
		},
		onLoad() {
			this.open = false
			
		},
		methods: {
			getExceeddangerNum(){
				let that = this
				uni.request({
					url: that.$api + 'danger/exceeddanger_count',
					method: 'POST',
					header:{
						token: uni.getStorageSync('token'),
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==1){
							that.timeoutNum = res.data.data
						}
					}
				})
			},
			popup() {
				this.open = !this.open
			},
			tomore() {
				uni.navigateTo({
					url: '/pages/news/newslist/newslist'
				})
			},
			imgTap(item,url) {
				// console.log('item',item);
				// console.log('url',url);
				url&&uni.navigateTo({
					url: '/pages/webview/webview?url=' + url
				})
			},
			rideoChange(e) {
				this.current = e + ''
			},
			beforeSwitch(index) {
				console.log(index)
				if (index == 1) {
					uni.redirectTo({
						url: '/pagesA/user/me'
					})
				}
			},
			openOk() {
				if (this.current == '') {
					return
				}
				if (this.current == '0') {
					let type = 2
					uni.navigateTo({
						url: '../IMEICheck/IMEICheck?type=' + type
					});
				} else {
					let type = 1
					uni.navigateTo({
						url: '../IMEICheck/IMEICheck?type=' + type
					});
				}
			},

			// 获取安装数据
			getInstallDetail() {
				let that = this
				uni.request({
					url: this.$url + 'common.banner/getList',
					method: 'POST',
					data: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						that.imgList = res.data.data
					}
				})
				this.num = 0
				uni.request({
					url: this.$url + 'common.notice/getList',
					method: 'POST',
					header:{
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == 1) {
							that.titles = []
							that.num += res.data.data.count
							that.speed = res.data.data.speed
							that.titles.push(res.data.data.list[0].title + res.data.data.list[0].createtime_text)
						} 
						
					}
				})
				uni.request({
					url: this.$url + 'notification.notification/getLists',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == 1) {
							that.num += res.data.data.count
						} 
					}
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.uni-noticebar[data-v-24a05de4] {
		margin-bottom: 0;
	}

	page {
		background-color: #F5F5F5;
		// padding-bottom: 200rpx;
		// margin-bottom: 150rpx;
	}

	.content {
		padding-bottom: 140rpx;
	}

	.banner {
		width: 100%;
		height: 400rpx;

		swiper {
			width: 750rpx;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.tips {
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		color: #777;
		background-color: #fff;
		margin-top: 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 30rpx;
		}
	}

	.func-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background-color: #fff;
		margin-top: 20rpx;

		.func-item {
			display: flex;
			justify-content: center;
			width: 50%;
			padding: 30rpx 0;

			image {
				width: 50rpx;
				height: 60rpx;
				margin: 0 12rpx 0 50rpx;
			}

			.func-item-right {
				width: 65%;
			}

			.func-item-title {
				font-size: 32rpx;
				line-height: 28rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				margin-bottom: 5px;
				display: flex;
				align-items: center;
				.msg{
					padding: 0 10rpx;
					border-radius: 50rpx;
					border: 1rpx solid red;
					color: red;
					margin-left: 10rpx;
				}
			}

			.func-item-detile {
				font-size: 24rpx;
				line-height: 28rpx;
				text-align: left;
				color: #777;
				text-overflow: hidden;
			}
		}
	}
</style>
